<template>
  <div>
    <h1>入库单</h1>
    <div>
      <el-form :inline="true" :model="form" class="demo-form-inline">

        <el-form-item label="仓库">
          <el-select v-model="form.name" placeholder="请选择" @change="getChildren">
            <el-option v-for="w in this.warehouse" :key="w.id" :label="w.title" :value="w.title"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="批次号">
          <el-input v-model="form.batchNo" placeholder="请输入批次号" disabled></el-input>
        </el-form-item>

        <br>

        <el-form-item label="入库时间">
          <el-date-picker
              v-model="form.createTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <br>

        <el-form-item label="备注">
          <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="form.comment">
          </el-input>
        </el-form-item>
      </el-form>
    </div>

    <div>
      <div>
        <el-button  size="small"  @click="addRow">新增</el-button>
      </div>
      <!--设置的表单-->
      <el-form :model="goodsData" ref="data" label-width="auto">
        <el-table
            border
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }"
            :data="goodsData"
            ref="table"
            style="width: 100%"
        >

          <el-table-column align="center"   label="物品名称">
            <template slot-scope="scope">
              <!--表格里面嵌套表单-->
              <el-form-item>
                <el-input
                    v-model="goodsData[scope.$index].name"
                    size="small"
                    placeholder="物品名称"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="center"  label="入库数量">
            <template slot-scope="scope">
              <el-form-item>
                <el-input
                    v-model="goodsData[scope.$index].num"
                    size="small"
                    type='number'
                    placeholder="入库数量"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="center"  label="调入位置">
            <template slot-scope="scope">
              <el-form-item label="调入位置">
                <el-cascader
                    v-model="goodsData[scope.$index].wid"
                    :options="haiz"
                    :props="{emitPath:false}"
                    :show-all-levels="false"></el-cascader>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="center"  label="计量单位">
            <template slot-scope="scope">
              <el-form-item>
                <el-input
                    v-model="goodsData[scope.$index].units"
                    size="small"
                    placeholder="计量单位"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="center"  label="货物类型">
            <template slot-scope="scope">
              <el-form-item>
                <el-input
                    v-model="goodsData[scope.$index].type"
                    size="small"
                    placeholder="货物类型"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                  @click="handleDeleteRow(goodsData[scope.$index])"
                  type="text"
                  size="small"
              >删除</el-button
              >
            </template>
          </el-table-column>

        </el-table>
      </el-form>
    </div>

    <div slot="footer" class="dialog-footer" style="margin-bottom: 10px">
      <el-button size="mini"  @click="submit">提交</el-button>
      <el-button size="mini" @click="resetForm()">重置</el-button>
    </div>
  </div>

</template>

<script>

export default {
  name: "PutStashView",
  data() {
    return {
      goodsData:[],
      form:{
        batchNo:'',
        goodsList:[],
      },
      warehouse:[],
      haiz:[],
    }
  }, methods: {
    getTree(){
      this.axios.post("/crop/getTree").then(r=>{
        this.warehouse=r.data.data;
      })
    },
    getChildren(title){
      this.axios.post("/crop/getChildren?title="+title).then(r=>{
        this.haiz=r.data.data;
      })
    },
    submit(){
      this.form.goodsList=this.goodsData;
      this.axios.post("/crop/addGoods",this.form).then(r=>{
        if (r.data.code==200){
          this.$message.success(r.data.msg);
          this.$router.push("/goods");
        }else {
          this.$message.error(r.data.msg);
        }
      })
    },
    getBathNum(){
      this.axios.post("/crop/getBatchNumber").then(r=>{
        this.form.batchNo=r.data.data;
      })
    },
    addRow() {
      let index = this.goodsData.length ;
      this.goodsData.push({
        key: index,
        name:'',
        num:'',
        type:'',
        specification:'',
        units:'',
      });
    },
    //删除行
    handleDeleteRow(row){
      let datas = this.goodsData;
      this.goodsData = datas.filter(data => data.key !== row.key);
    },
    resetForm() {
      let datas = this.goodsData;
      for (var i = 0; i < datas.length; i++){
        datas[i].name='';
        datas[i].num='';
        datas[i].type='';
        datas[i].specification='';
        datas[i].units='';
      }
    },

  }, created() {
    this.getBathNum();
    this.getTree();
  }
}
</script>

<style scoped>

</style>
